﻿@{
    ViewBag.Title = "ScoreBar2";
}
@Scripts.Render("~/bundles/jquery")
<h2>成绩统计图</h2>

<div id="container1" style="min-width:400px;height:400px"></div>
<div id="container2" style="min-width:400px;height:400px"></div>
<script type="text/javascript">

    $(function () {

        var id =@ViewBag.id;
       
        for (i = 1; i <= 2; i++) {
            console.log(id)
            var pd = { "id": id, "j": i };
            $.ajax({
                type: "post",
                url: "/Score/getpassrate",
                datatype: "json",
                data: pd,
                async: false,
                success: function (result) {
                    var nid = 'container' + i;
                    console.log(result);
                    if (i == 1) {
                        var title = '全年级各科及格率';
                    }
                    if (i == 2) {
                        var title = "全年级各科优秀率";
                    }
                    
                    bar(result,nid,title);

                },
            });
        }
        

        function bar(data1,nid,title) {
            var chart = Highcharts.chart(nid, {
                chart: {
                    type: 'column'
                },
                title: {
                    text:title
                },
                subtitle: {
                    text: '数据来源: WorldClimate.com'
                },
                xAxis: {
                    categories: [
                        '一班', '二班', '三班', '四班', '五班', '六班', '七班', '八班', '九班', '十班', '十一班', '十二班'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '百分率(%)'
                    }
                },
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '语文',
                    data: data1[0]
                }, {
                    name: '数学',
                    data: data1[1]
                }, {
                    name: '英语',
                    data: data1[2]
                },
                ]
            });
        } 
       
        


    });


   



</script>
